<template>
  <div>
    <el-container>
      <el-header>
        <div style="top:10px; height:70px;background-color: rgb(244, 244, 244);">
          <!--        <section data-v-007fac91="" class="container hero-top">-->
          <div class="header_logo">
            <el-image :src="logoUrl" fit="fill"/>
          </div>
          <div class="header_subtitle">
            <span style="font-size: 30px">| 知识图谱检索</span>
            <span>(内部)</span>
          </div>
          <p class="header_warning">此系统为非涉密应用系统，禁止处理传输涉密信息。</p>
        </div>
      </el-header>
      <el-main>
        <el-input placeholder="请输入搜索内容" clearable v-model="input" class="input-with-select" style="width:990px">
          <!--          <el-select v-model="select" slot="prepend" placeholder="所有" style="width:200px">-->
          <!--            <el-option label="所有" value=""></el-option>-->
          <!--            <el-option label="文章" value="paper"></el-option>-->
          <!--            <el-option label="作者" value="author"></el-option>-->
          <!--            <el-option label="机构" value="institution"></el-option>-->
          <!--            <el-option label="报纸" value="newspaper"></el-option>-->
          <!--            <el-option label="期刊" value="periodical"></el-option>-->
          <!--            <el-option label="会议" value="conference"></el-option>-->
          <!--          </el-select>-->
          <!--          <template slot="prepend">关键词：</template>-->
          <el-button slot="append" icon="el-icon-search" @click="onSearch"></el-button>
        </el-input>
        <p/>
        <!--p style="font-size: 14px"><div style="font-weight: bold;">Topics:</div> GPT-3, 弱监督学习, AI医疗, 信息检索与推荐</p-->
        <!--        "abstract": "目前,对航空经济与航空金融的研究集中在三个方面:一是航空发展。",-->
        <!--        "author": "孟雪珂;许世谦",-->
        <!--        "id": "C031期刊_04.txt_37322",-->
        <!--        "institution": "郑州大学商学院",-->
        <!--        "pubdate": "2017-4",-->
        <!--        "resource": "CJFD",-->
        <!--        "score": 10.498823165893555,-->
        <!--        "title": "郑州航空港航空金融支持航空经济现状分析"-->
        <el-divider></el-divider>
        <div v-loading="isLoading" style="min-height: 40vh">
          <div v-for="(item,index) in retData.slice((currentPage-1)*pageSize,currentPage*pageSize)" :key="index">
            <el-card class="box-card">
              <!--              <el-descriptions column="1">-->
              <!--                <el-descriptions-item>-->
              <!--                  <el-link :href="'#/paper/?id='+item.id" target="_blank" class="title" type="primary">{{ item.title }}-->
              <!--                  </el-link>-->
              <!--                </el-descriptions-item>-->
              <!--                <el-descriptions-item label="手机号">18100000000</el-descriptions-item>-->
              <!--                <el-descriptions-item label="居住地">苏州市</el-descriptions-item>-->
              <!--                <el-descriptions-item label="备注">-->
              <!--                  <el-tag size="small">学校</el-tag>-->
              <!--                </el-descriptions-item>-->
              <!--                <el-descriptions-item label="联系地址">江苏省苏州市吴中区吴中大道 1188 号</el-descriptions-item>-->
              <!--              </el-descriptions>-->
              <!--              <el-link :href="'#/paper?id='+item.id+'&title=&resource='" target="_blank" class="title" type="primary">-->
              <!--                {{ item.title }}-->
              <!--              </el-link>-->
              <el-link
                :href="'http://192.168.1.1:8080/get_qh_detail?tm='+encodeURI(item.tm)+'&wjm='+encodeURI(item.wjm)+'&bm='+encodeURI(item.bm)+'&tablename='+encodeURI(item.tablename)+'&db='+encodeURI(item.db)"
                target="_blank" class="title" type="primary">
                {{ item.title }}
              </el-link>
              <!--              <el-link :href="'#/paper?id=&title='+item.title+'&resource='+item.resource" target="_blank" class="title" type="primary">-->
              <!--                {{ item.title }}-->
              <!--              </el-link>-->
              <br/>
              <p class="author"><span style="font-size: 16px;color:#909399">作者：</span>{{ item.author }}</p>
              <p class="institution"><span style="font-size: 16px;color:#909399">机构：</span>{{ item.institution }}</p>
              <p class="date"><span style="font-size: 16px;color:#909399">时间：</span>{{ item.pubdate }}</p>
              <p class="abstract"><span style="font-size: 14px;color:#909399">摘要：</span>{{ item.abstract }}</p>
              <!--              <p class="content"><br>{{ item.author }}</p>-->
              <!--              <p class="id">{{ item.id }}</p>-->
            </el-card>
          </div>
          <el-pagination
            @size-change="handleSearchSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="sizes, total, prev, pager, next, jumper"
            :total="totalPages">
          </el-pagination>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import Vue from 'vue'

export default {
  name: 'search',
  inject: ['reload'],
  data () {
    return {
      logoUrl: require('@/assets/logo.png'),
      input: '',
      retData: [],
      data: [],

      currentPage: 1,
      totalPages: 0,
      pageSize: 20,
      pageIndex: '1', // 当前页的序号
      scrolltop: 0, // 滑轮距顶部的距离
      isLoading: false,
      isSearch: false
    }
  },
  mounted () {
    if (JSON.stringify(this.$route.query) !== '{}') {
      this.input = this.$route.query.keyword
      if (this.input.length > 0) {
        this.onSearch()
      }
    }
  },
  methods: {
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.curPage = val
    },
    handleSearchSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.currentPage = 1
      this.pageSize = val
    },
    onSearch () {
      if (this.input.length <= 0) {
        return
      }
      this.isLoading = true
      // this.$axios
      //   .get('http://localhost:2226/retrieve?limit=&query=' + encodeURI(this.input))
      //   .then(res => {
      //     this.retData = res.data.data
      //     this.totalPages = this.retData.length
      //     console.log(this.retData)
      //     this.isLoading = false
      //     this.reload()
      //   })
      //   .catch(error => {
      //     this.$message.error('检索失败，请重试!')
      //     console.log(error)
      //   })
      Vue.prototype.post('/retrieve', {
        limit: 1000,
        query: this.input
      }, this.onGetDataSucc)

      // this.retData = require('@/data/search.json').data
      // this.totalPages = this.retData.length
      // console.log(this.retData)
      // this.isLoading = false
      // this.reload()
    },
    onGetDataSucc (res) {
      this.retData = res.data.data
      this.totalPages = this.retData.length
      this.currentPage = 1
      console.log(this.retData)
      this.isLoading = false
      this.reload()
    }
  }
}
</script>

<style lang="scss" scoped>
.header {
  height: 140px;
  left: 0;
  top: 0;
  position: absolute;
  line-height: 70px;
  width: 100%;
}

.header_logo {
  position: absolute;
  left: 5%;
  // padding: 4px 28px 0 30px;
  //top: 1px;
  width: 23%;
}

.header_subtitle {
  position: absolute;
  //top: 10px;
  left: 29%;
  font-family: "Arial Black";
  font-size: large;
  color: #006699;
}

.header_warning {
  position: absolute;
  top: 30px;
  right: 10%;
  font-family: "Arial Black";
  font-size: small;
  color: crimson;
}

.body {
  position: absolute;
  top: 140px;
  left: 0;
  width: 100%;
}

.box-card {
  margin: 10px;
}

.title {
  font-size: 20px;
  float: left;
  text-align: left;
}

.author {
  font-size: 16px;
  color: #000;
  text-align: left;
}

.institution {
  font-size: 16px;
  color: #000;
  text-align: left;
}

.date {
  font-size: 16px;
  color: #000;
  text-align: left;
}

.abstract {
  font-size: 14px;
  line-height: 30px;
  color: #000;
  text-align: left;
}

.box-card {
  margin-top: 8px;
  filter: Alpha(opacity=80);
  opacity: 0.8;
  background: rgba(255, 255, 255, 0.4);
  margin-bottom: 10px;
}
</style>
